<template>
  <div class="About" v-show="list">
    <Back class="jsfkdfj" />
    <router-link class="menu" to="/menu"
      ><i class="el-icon-menu"></i
    ></router-link>
    <div class="box1">
      <div class="inner">
        <ul v-for="(item, i) in list" :key="i">
          <li
            @click="change(item.menufKind)"
            :class="item.menufKind === name ? 'bg1' : ''"
          >
            {{ item.menufKind }}
          </li>
        </ul>
      </div>
    </div>
    <div class="box2">
      <ul v-for="item in list2" :key="item.id">
        <li @click="check">
          <!-- {{url+name+'/'+item.url}} -->
          <img
            class="img1"
            :src="'http://192.168.10.32/junjian/img/' + item.url"
            alt=""
          />
          <router-link
            class="innerbg2"
            :to="'/lesdetail' + '?courseId=' + item.courseid"
            ><h2 v-text="item.title"></h2
          ></router-link>
          <img
            class="img2"
            :src="'http://192.168.10.32/junjian/' + item.audiourl"
            alt=""
          />
          <span>{{ item.avator }}</span>
          {{ item.courseName }}
          <p class="p1">{{ item.count }}<span> 人已学习</span></p>
          <b class="b1"
            ><i class="el-icon-video-camera-solid"></i>{{ item.playcount }}</b
          >
          <b class="b2">{{ item.laber1 }}</b>
          <b class="b3">{{ item.laber2 }}</b>
        </li>
      </ul>
    </div>
    <Top />
  </div>
</template>

<script>
import { getvideo, getkinds } from "@/api";
export default {
  methods: {
    check() {
      // this.$router.push({
      //   path: "/lesdetail",
      //   courseId: "1",
      // });
    },
    change(name) {
      this.name = name;
      this.getVideo();
    },
    getVideo() {
      let name = this.name;
      getvideo({ kind: name }).then((res) => {
        this.list2 = res.data.data;
      });
    },
  },
  created() {
    getkinds().then((res) => {
      this.list = res.data.data;
    });
    let name = this.name;
    getvideo({ kind: name }).then((res) => {
      this.list2 = res.data.data;
    });
  },
  data() {
    return {
      name: "营销",
      list: [],
      list2: [],
    };
  },
};
</script>

<style scoped lang='scss'>
.About {
  font-size: 30px;
  margin-bottom: 10vh;
  position: relative;
  > .menu {
    > .el-icon-menu {
      color: #666;
      position: absolute;
      z-index: 100;
      top: 0.6vh;
      border-left: 1px solid rgba(0, 0, 0, 0.3);
      font-size: 45px;
      right: 0;
      width: 8vw;
      line-height: 4vh;
      height: 4vh;
      text-align: center;
      background: #fff;
    }
  }

  > .box2 {
    // position: relative;
    margin-top: 1vh;
    padding: 0 3vw;
    > ul {
      padding-bottom: 2vh;
      margin-bottom: 1vh;
      box-shadow: 0px 0px 3px 3px #ccc;

      > li {
        position: relative;
        overflow: hidden;
        > .b2 {
          text-align: center;
          position: absolute;
          width: 20vw;
          background-color: rgba(51, 51, 51, 0.7);
          color: #fff;
          font-weight: normal;
          border-radius: 3vw;
          top: 1vh;
          left: 5vw;
          height: 4vh;
          line-height: 4vh;
        }
        > .b3 {
          text-align: center;
          position: absolute;
          width: 20vw;
          // background: rgb(206, 206, 206);
          background-color: rgba(51, 51, 51, 0.7);
          color: #fff;
          font-weight: normal;
          border-radius: 3vw;
          top: 1vh;
          left: 30vw;
          height: 4vh;
          line-height: 4vh;
        }
        > .b1 {
          padding-left: 6vw;
          box-sizing: border-box;
          position: absolute;
          width: 15vw;
          background-color: rgba(255, 255, 255, 0.2);
          color: #fff;
          font-weight: normal;
          border-radius: 3vw;
          top: 25vh;
          left: 5vw;
          height: 3.5vh;
          line-height: 3.5vh;
          > i {
            color: orange;
            position: absolute;
            left: 1vw;
            top: 0;
            transform: translateY(50%);
          }
        }
        > span {
          vertical-align: middle;
          display: inline-block;
          color: #666;
        }
        > .p1 {
          color: orange;
          float: right;
          > span {
            color: #999;
            margin-right: 1vw;
          }
        }
        > .innerbg2 {
          > h2 {
            color: black;
            margin-left: 3vw;
            padding: 1vh 0;
          }
        }

        > .img1 {
          width: 100%;
          height: 30vh;
          box-sizing: border-box;
        }
        > .img2 {
          margin-right: 2vw;
          vertical-align: middle;
          width: 7vw;
          margin-left: 3vw;
          height: 7vw;
          border-radius: 50%;
        }
      }
    }
  }
  > .box1::-webkit-scrollbar {
    display: none;
  }
  > .box1 {
    margin-left: 10vw;
    box-sizing: border-box;
    width: 90vw;
    height: 6vh;

    // box-shadow: 0.2vh 0.2vh 0.2vh #ccc;
    overflow-x: scroll;
    > .inner {
      display: flex;
      width: 200vw;
      > ul {
        height: 5vh;
        line-height: 5.5vh;
        width: 19vw;
        text-align: center;
        position: relative;
        > li {
          -webkit-scrollbar: none;
        }
        > .bg1 {
          color: rgba(255, 1, 1, 0.8);
        }
        > .bg1:after {
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          content: "";
          width: 10vw;
          border-radius: 10px;
          background: rgba(255, 1, 1, 0.8);
          height: 0.4vh;
        }
      }
    }
  }
}
</style>